<template>
  <div class="home-service-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="家居服务平台"
      left-arrow
      @click-left="handleGoBack"
    />

    <!-- 会员优惠Banner -->
    <van-image
      src="https://picsum.photos/800/200?random=1"
      fit="cover"
      class="member-banner"
    >
      <template #overlay>
        <div class="member-banner-content">
          <h2>加入会员</h2>
          <p>首单立减18元起</p>
          <van-button type="default" size="small">去看看</van-button>
        </div>
      </template>
    </van-image>

    <!-- 预约更多服务按钮 -->
    <van-button class="reserve-btn" type="warning" round>点击预约更多服务</van-button>

    <!-- 平台介绍区块 -->
    <div class="platform-intro">
      <h2>全国家居安装维修平台</h2>
      <p class="rank">NO.1</p>
      <p class="intro-desc">*欧睿信息咨询（上海）有限公司，按中国大陆2024年平台GMV计算，于2025年2月完成调研。</p>
      <van-image
        src="https://picsum.photos/600/300?random=2"
        fit="cover"
        class="trophy-img"
      />
      <div class="stats">
        <div class="stat-item">
          <p class="stat-num">400W+</p>
          <p class="stat-text">优选师傅</p>
        </div>
        <div class="stat-item">
          <p class="stat-num">1.8亿+</p>
          <p class="stat-text">客户好评</p>
        </div>
      </div>
    </div>

    <!-- 服务标签栏 -->
    <van-tabs v-model:active="activeTab" class="service-tabs">
      <van-tab title="家电安装">家电安装</van-tab>
      <van-tab title="家电清洗">家电清洗</van-tab>
      <van-tab title="家庭保洁">家庭保洁</van-tab>
    </van-tabs>

    <!-- 省心无忧服务区块 -->
    <div class="service-block">
      <h2 class="block-title">省心无忧 一站式安装维修</h2>
      <div class="service-grid">
        <van-cell
          v-for="(item, index) in installServices"
          :key="index"
          :title="item.title"
          :label="item.desc"
          :icon="item.img"
          class="service-item"
        >
          <template #right-icon>
            <van-button type="warning" size="small">立即预约</van-button>
          </template>
        </van-cell>
      </div>
    </div>

    <!-- 地址提示栏 -->
    <van-notice-bar
      left-icon="info-o"
      wrapable
    >
      提前添加服务地址，提高拔刀速度
    </van-notice-bar>

    <!-- 新人福利券区块 -->
    <van-image
      src="https://picsum.photos/800/200?random=3"
      fit="cover"
      class="coupon-banner"
    >
      <template #overlay>
        <div class="coupon-banner-content">
          <h2>新人专属福利券</h2>
          <p>288元 专属福利券</p>
          <p>下单直接抵钱</p>
          <van-button type="warning" size="small">立即抢券</van-button>
        </div>
      </template>
    </van-image>

    <!-- 家电安装服务列表 -->
    <div class="service-list">
      <van-cell
        v-for="(item, index) in applianceServices"
        :key="index"
        :title="item.title"
        :label="`已服务${item.serveCount}次`"
        :icon="item.img"
        class="service-item"
      >
        <template #extra>
          <div class="price-group">
            <p class="original-price">日常价 ¥{{ item.originalPrice }}</p>
            <p class="current-price">券后价：¥{{ item.currentPrice }}</p>
            <van-button type="warning" size="small">领券下单</van-button>
          </div>
        </template>
      </van-cell>
    </div>

    <!-- 新用户专属福利Banner -->
    <van-image
      src="https://picsum.photos/800/300?random=4"
      fit="cover"
      class="new-user-banner"
    />

    <!-- 新人专属秒杀区块 -->
    <div class="seckill-block">
      <h2 class="block-title">新人专属秒杀</h2>
      <p class="countdown">距结束 <span class="countdown-num">8</span> 天 <span class="countdown-num">09</span> : <span class="countdown-num">31</span> : <span class="countdown-num">52</span></p>
      <div class="seckill-grid">
        <van-cell
          v-for="(item, index) in seckillServices"
          :key="index"
          :title="item.title"
          :label="`¥${item.originalPrice} ¥${item.currentPrice}`"
          :icon="item.img"
          class="seckill-item"
        >
          <template #extra>
            <div class="seckill-extra">
              <p class="stock">剩{{ item.stock }}%</p>
              <van-button type="danger" size="small">抢</van-button>
            </div>
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { 
  NavBar, Image, Button, Tabs, Tab, Cell, NoticeBar 
} from 'vant';

export default {
  components: {
    VanNavBar,
    VanImage,
    VanButton,
    VanTabs,
    VanTab,
    VanCell,
    VanNoticeBar,
  },
  setup() {
    // 激活的标签页索引
    const activeTab = ref(0);

    // 安装类服务数据
    const installServices = ref([
      {
        title: '柜类安装',
        desc: '师傅报价、择优选择',
        img: 'https://picsum.photos/100/100?random=5'
      },
      {
        title: '床体安装',
        desc: '师傅报价、择优选择',
        img: 'https://picsum.photos/100/100?random=6'
      },
      {
        title: '柜类维修',
        desc: '开裂变形、掉漆划痕',
        img: 'https://picsum.photos/100/100?random=7'
      },
      {
        title: '墙体地面维修',
        desc: '翻新、美缝、刷漆',
        img: 'https://picsum.photos/100/100?random=8'
      }
    ]);

    // 家电服务列表数据
    const applianceServices = ref([
      {
        title: '油烟机安装',
        serveCount: 63785,
        originalPrice: 100,
        currentPrice: 90,
        img: 'https://picsum.photos/100/100?random=9'
      },
      {
        title: '洗衣机安装',
        serveCount: 16751,
        originalPrice: 98,
        currentPrice: 88,
        img: 'https://picsum.photos/100/100?random=10'
      },
      {
        title: '空调安装',
        serveCount: 83468,
        originalPrice: 129,
        currentPrice: 119,
        img: 'https://picsum.photos/100/100?random=11'
      }
    ]);

    // 新人秒杀服务数据
    const seckillServices = ref([
      {
        title: '3小时日常保洁',
        originalPrice: 139,
        currentPrice: 115,
        stock: 17,
        img: 'https://picsum.photos/100/100?random=12'
      },
      {
        title: '3小时全屋深度保洁',
        originalPrice: 159,
        currentPrice: 135,
        stock: 9,
        img: 'https://picsum.photos/100/100?random=13'
      },
      {
        title: '挂式空调2台清洗',
        originalPrice: 129,
        currentPrice: 115,
        stock: 56,
        img: 'https://picsum.photos/100/100?random=14'
      }
    ]);

    // 返回上一页逻辑
    const handleGoBack = () => {
      history.back();
    };

    return {
      activeTab,
      installServices,
      applianceServices,
      seckillServices,
      handleGoBack
    };
  }
};
</script>

<style scoped>
.home-service-page {
  background-color: #e6fff7;
  min-height: 100vh;
}

/* 会员Banner样式 */
.member-banner {
  width: 100%;
  height: auto;
  position: relative;
}

.member-banner-content {
  position: absolute;
  left: 20px;
  top: 20px;
  color: #fff;
}

/* 预约按钮样式 */
.reserve-btn {
  margin: 16px auto;
  display: block;
  width: 80%;
}

/* 平台介绍区块样式 */
.platform-intro {
  padding: 16px;
  text-align: center;
}

.platform-intro h2 {
  font-size: 24px;
  margin-bottom: 8px;
}

.rank {
  font-size: 36px;
  color: #1989fa;
  font-weight: bold;
  margin-bottom: 8px;
}

.intro-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
}

.trophy-img {
  width: 100%;
  height: auto;
  margin-bottom: 16px;
}

.stats {
  display: flex;
  justify-content: space-around;
}

.stat-item {
  text-align: center;
}

.stat-num {
  font-size: 20px;
  font-weight: bold;
  color: #1989fa;
}

.stat-text {
  font-size: 14px;
  color: #666;
}

/* 服务标签栏样式 */
.service-tabs {
  margin: 16px;
}

/* 服务区块样式 */
.service-block {
  padding: 16px;
}

.block-title {
  font-size: 20px;
  text-align: center;
  margin-bottom: 16px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.service-item {
  padding: 12px;
}

/* 价格组样式 */
.price-group {
  text-align: right;
}

.original-price {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}

.current-price {
  font-size: 16px;
  color: #ff4500;
  font-weight: bold;
}

/* 新人福利券Banner样式 */
.coupon-banner {
  width: 100%;
  height: auto;
  position: relative;
  margin: 16px 0;
}

.coupon-banner-content {
  position: absolute;
  left: 20px;
  top: 20px;
  color: #fff;
}

/* 新用户Banner样式 */
.new-user-banner {
  width: 100%;
  height: auto;
  margin: 16px 0;
}

/* 秒杀区块样式 */
.seckill-block {
  padding: 16px;
}

.countdown {
  text-align: center;
  margin-bottom: 16px;
}

.countdown-num {
  background-color: #ff4500;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
}

.seckill-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.seckill-item {
  padding: 12px;
}

.seckill-extra {
  text-align: right;
}

.stock {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}
</style>